<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../sencha_touch/resources/css/sencha-touch.css" type="text/css">

    <script type="text/javascript" src="../sencha_touch/sencha-touch.js"></script>
    <script type="text/javascript" src="albumdata.js"></script>
    <script type="text/javascript" src="UxBufList.js"></script>
<style type="text/css">
	.x-list .x-list-item {
		font-weight: bold;
		font-size: 100%;
		font-family:helvetica;
	}
</style>  
    <script type="text/javascript">
Ext.reg('mylist', Ext.ux.BufferedList);

var data = []
for (var i=0; i<600; i++) data.push({firstName: 'John'+i, lastName: 'Wayne'})

Ext.setup({
    onReady: function(){
        Ext.regModel('Contact', {
            fields: ['firstName', 'lastName']
        });
        
        var store = new Ext.data.Store({
            model: 'Contact',
            data : data
        });
        
        new Ext.TabPanel({
          layout:'fit',
          fullscreen: true,
          scroll:'vertical',
          items: [{
            title: 'MyPanel',
            xtype: 'panel'
          },{
            title: 'MyList',
            fullscreen: true,
            xtype: 'mylist',
            itemTpl: '{firstName} {lastName}',
            store: store
          }]
        });
    }
});
    </script>
</head>
<body></body>
</html>